<template>
  <header class="trash-header" :class="{check:isTrashCheck}">
    <div class="header-tool">
      <div class="item">
        <span v-if="isTrashCheck" @click="cancelCheck" class="icon">
          <mu-icon value="取消"></mu-icon>
        </span>
        <span v-else class="icon" @click="backList">
          <mu-icon value="返回"></mu-icon>
        </span>
      </div>
      <div class="flex" style="text-align:center">
        <span v-if="isTrashCheck">{{checkTitle}}</span>
        <span v-else>{{title}}</span>
      </div>
      <div class="item" style="text-align:right">
        <span v-if="isTrashCheck" @click="allTrashCheck(!allChecked)" class="icon">
          <mu-icon :value="checkBtnTxt"></mu-icon>
        </span>
        <span v-else>
          <span class="icon" v-if="layout=='grid'" @click="changeLayout">
            <mu-icon value="列表"></mu-icon>
          </span>
          <span class="icon" v-else @click="changeLayout">
            <mu-icon value="方格"></mu-icon>
          </span>
        </span>
      </div>
    </div>
  </header>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      title: "废纸篓",
      checkBtnTxt: "全选"
    };
  },
  computed: {
    ...mapGetters(["layout", "isTrashCheck"]),
    checkTitle() {
      return `已选择${this.$store.state.deleteTrashNotes.length}项`;
    },
    allChecked() {
      return this.$store.state.trashNotes.every(note => note.done);
    }
  },
  methods: {
    //全部勾选
    allTrashCheck(done) {
      this.checkBtnTxt = done ? "取消全选" : "全选";
      this.$store.dispatch("allTrashCheck", done);
    },
    //取消勾选
    cancelCheck() {
      this.$store.dispatch("cancelTrashCheck");
    },
    //返回上一级
    backList() {
      this.$router.push({ path: "/NoteFolder" });
    },
    //切换布局
    changeLayout() {
      if (this.$store.state.layout == "list") {
        this.$store.state.layout = "grid";
      } else {
        this.$store.state.layout = "list";
      }
    }
  }
};
</script>
<style scoped>
.flex {
  flex: 1;
}
.trash-header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999;
  background: #f5f5f5;
}
.trash-header .header-tool {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  display: flex;
  box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.trash-header.check .header-tool {
  background: #fff;
}
.trash-header .item {
  width: 100px;
  padding: 0 10px;
}
.trash-header .item .icon {
  font-size: 12px;
  color: #313131;
  vertical-align: middle;
  cursor: pointer;
}
</style>


